<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-35617311-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

<div align="middle" style="text-align:center;margin: 0px 0 0 0px;  ">
<style>
@font-face {
  font-family: "pt-sans";
  src: url({{ STATIC_URL }}fonts/PTS55F.ttf) format("truetype");
}
font{
	font-size:16;
	color:#FFFFFF;
	font-family: pt-sans;
}
div{
	margin-left:auto;margin-right:auto;
}
.header{
	color:#FFFFFF;
	font-size:28;
	font-family: pt-sans;
}
.small, label, form, div{
	font-family: pt-sans;
}
</style>
<html>
<head>
<link rel="icon" href="{{ STATIC_URL }}icon.jpg" type="image/jpg" size="16x16"/>
<title>Bomtak</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body background="{{ STATIC_URL }}images/background.jpg" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" >
<img src="{{ STATIC_URL }}images/Bomtak_Website_Landing-Page_01.jpg" width="999" height="155" alt=""><br/>
<div style="width:100%;height:220px; background-image: url({{ STATIC_URL }}images/yellow.jpg);">
<div style="width:1000;height:100%">
	<div style="float:left;width:10%;height:100%;text-align:left"></div>

	<div style="float:left;width:35%;height:100%;text-align:left">
		<br/>
		<b class="header">What is it?</b><br/>
		<font>
		Bomtak is a social platform directed towards developing the music scene locally in Egypt by connecting people who teach music with people who want to learn music and much more!
		</font>

	</div>

	<div style="float:left;width:10%;height:100%;text-align:left"></div>

	<div style="float:left;width:35%;height:100%;text-align:left">
		<br/>
		<b class="header">Welcome back!</b><br/>
		{% if error_message and not error_message == "start" %}
			<label class="text" style="color: #FF0000;font-size:14">{{ error_message }}</label>
			<form action="" method="post">{% csrf_token %}
		{% else %}
			<form action="/login/" method="post">{% csrf_token %}
		{% endif %}
		<font>Username:</font><br/>
		<input type="text" name="username" style="border: none;height:25px;width:200px"/><br/>
		<font>Password:</font><br/>
		<input type="password" name="password" style="border: none;height:25px;width:200px" /><br/>

		&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
		&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
		&nbsp&nbsp&nbsp&nbsp
		<input type="image" src="{{ STATIC_URL }}images/signin_btn.jpg" alt='Submit Form' >
		</form>

	</div>

	<div style="float:left;width:10%;height:100%;text-align:left"></div>
</div>
</div>


<div style="width:1000;height:400px;" >
	<div style="float:left;width:100%;height:20%;text-align:left"></div>

	<div style="float:left;width:10%;height:60%;text-align:left"></div>

	<div style="float:left;width:20%;height:60%;text-align:left;">

		<div style="float:left;width:100%;height:50%;text-align:left;color:#FFFFFF;font-family: pt-sans;background-image: url({{ STATIC_URL }}images/yellow.jpg)">
			<div style="float:left;width:10%;height:100%;text-align:left"></div>
			<div style="float:left;width:80%;height:100%;">
			<br/><font style="font-size:18">Forgot Password?</font><br/>
			<small style="font-size:12">
				{% if forgotPass_success_msg %}
					{{ forgotPass_success_msg }}<br/>
				{% else %}	
					{% if forgotPass_error_msg %}
						<label class="text" style="color: #FF0000">{{ forgotPass_error_msg }}</label><br/>
					{% else %}	
						<br/>
					{% endif %}
				{% endif %}
			</small>
			<form action="/emailPass/" method="get" name="forgotPass">{% csrf_token %}
				<input type="text" name="user" style="border: none;height:20px;width:100%"/><br/>
				<small style="color:#000000">Enter your email and <a href="#" onclick="document.forgotPass.submit()" style="color:#000000;text-decoration: none;">click here</a></small>
			</form>
			</div>
			<div style="float:left;width:10%;height:100%;text-align:left"></div>	
		</div>

		<div style="float:left;width:10%;height:50%;text-align:left"></div>

	</div>



	<div style="float:left;width:15%;height:60%;text-align:left"></div>
	<div style="float:left;width:50%;height:60%;text-align:left;color: #384446">
		<b class="header" style="color: #384446;font-size:30">Not part of Bomtak yet?</b><br/>
		<small>Fill in your basic information for now and you can customize all your data later on :)</small><br/><br/>
		<form  method="post" action="/register/" name="register1">{% csrf_token %}
			<table>
				<tr>
			<td style="width:30%;height:100%;" valign="top">
					{{ form.non_field_errors }}
					{% for field in form %}
						<label class="fieldWrapper">
							{{ field.label_tag }}:<br/>
							{% if field.errors %}
								<label class="text" style="color:#FF0000" >{{ field.errors|removetags:"li ul"|safe }}</label>
							{% endif %}
							{{ field }}<br/>
						</label>
					{% endfor %}
					

			</td>
			<td style="width:30%;height:100%;" valign="top">
				Email:<br/>
				{% if email_error %}
					<label class="text" style="color:#FF0000" >{{ email_error }}</label><br/>
				{% endif %} 
				<input name="email" class="element text medium" type="text" maxlength="255" value="{{ email }}"/><br/> 
				Activation Code:<br/>
				{% if code_error %}
					<label class="text" style="color:#FF0000" >{{ code_error }}</label><br/>
				{% endif %} 
				<input name="code" class="element text medium" type="text" maxlength="255" value="{{ code }}"/><br/> 
				<small>Currently, registeration is only by invitation, but soon, it will be for everyone</small>
				<br/>

				<br/><br/>
			</td>
			<td style="width:40%;height:100%;" valign="top">
				You are a:
				{% if userType_error %}
					<label class="text" style="color:#FF0000" >{{ userType_error }}</label>
				{% else %}
					<br/>
				{% endif %}
				<small>
					<input id="element_1_1" name="user_type" class="element radio" type="radio" value="student" checked/>
					<label class="choice" for="element_1_1">Music Student</label><br/>
					<input id="element_1_2" name="user_type" class="element radio" type="radio" value="teacher" />
					<label class="choice" for="element_1_2">Music Teacher and Student</label><br/>
					<input id="element_1_3" name="user_type" class="element radio" type="radio" value="institute" />
					<label class="choice" for="element_1_3">Music Institute/Center/Studio</label>
				</small>
				<br/><br/>
				<input type="image" src="{{ STATIC_URL }}images/done_btn.jpg"  style="float:right"></a>
			</td>
			</tr>		
	</table>
			
		</form>

	</div>
	<div style="float:left;width:5%;height:60%;text-align:left"></div>

	<div style="float:left;width:100%;height:20%;text-align:left"></div>

</div>


</body>
</html>

</div>